<template>
    <el-dialog title="选择广告"  :visible.sync="visible" :close-on-click-modal="false"
    :before-close="handleCloseDialog" width="1200px" class="goods-dialog">
    <div class="app-container">
      <el-card class="filter-container" shadow="never">
        <div>
          <el-button style="float:right" type="primary" @click="handleSearchList()" size="mini">
            查询搜索
          </el-button>
          <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="mini">
            重置
          </el-button>
        </div>
        <div>
          <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
            <el-form-item label="广告名称：">
              <el-input v-model="listQuery.goodsName" class="input-width" placeholder="请输入广告名称" clearable></el-input>
            </el-form-item>
            <!-- <el-form-item label="分类：">
                <el-select v-model="listQuery.classify" placeholder="请选择分类">
                  <el-option
                    v-for="item in classifyOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item> -->
          </el-form>
        </div>
      </el-card>
  
      <div class="table-container goods-container">
        <el-table  ref="singleTable" :data="list" size="mini" style="width: 100%;" v-loading="listLoading" border  >
          <el-table-column  width="60" align="center">
            <template #default="scope">
              <el-radio
                v-model="selectedId"
                :label="scope.row.id"
                @change="handleRadioChange(scope.row)"
              ></el-radio>
            </template>
          </el-table-column>
          <el-table-column label="广告ID" width="80" align="center">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column label="广告图片" width="100" align="center">
            <template slot-scope="scope">
              <div v-viewer class="img-box">
                <img :src="scope.row.goodsPic?`${user.filePreviewUrl}/${scope.row.goodsPic}`:''">
              </div>
            </template>
          </el-table-column>
          <el-table-column label="广告名称"  align="center">
            <template slot-scope="scope">{{ scope.row.goodsName }}</template>
          </el-table-column>
          <el-table-column label="最低投入" width="120"  align="center">
            <template slot-scope="scope">{{ formatAmount(scope.row.minPrice) }}</template>
          </el-table-column>
          <el-table-column label="最高投入" width="120"  align="center">
            <template slot-scope="scope">{{ formatAmount(scope.row.maxPrice) }}</template>
          </el-table-column>
          <el-table-column label="添加时间" width="180" align="center">
            <template slot-scope="scope">{{ scope.row.createTime | formatDateTime }}</template>
          </el-table-column>
          <el-table-column label="是否默认广告" width="120" align="center">
            <template slot-scope="scope"> <el-tag size="small" :type="scope.row.isDefault==1?'success':'danger'">{{ scope.row.isDefault==1 ? '是' : '否' }}</el-tag> </template>

          </el-table-column>

        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
          :page-size="listQuery.pageSize" :page-sizes="[5, 10, 15, 20]" :total="total">
        </el-pagination>
      </div>



    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleConfirm" size="mini">确 定</el-button>
      <el-button @click="handleCloseDialog" size="mini">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getGoodsList,DefaultGoodsClassify } from '@/api/goods/index';
import { formatDate } from '@/utils/date';
import { formatAmount,getStorage } from "@/utils/index";
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  goodsName: null
};
export default{ 
  props: {
    row: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      visible:true,
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      user: getStorage('user') || {},
      listLoading: false,
      classifyOptions:[],
      selectedId: this.row.defaultGoodsId, // 绑定选中的ID
      selectedRow: null // 存储选中的行数据
    }
  },
  created() {
    this.getList();
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    formatAmount,
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
      this.getList();
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
  
 
    getList() {
      this.listLoading = true;
      getGoodsList(this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
    handleCloseDialog() {
      this.$emit("handle-cancel");
    },
    handleRadioChange(row) {
      this.selectedId = row.id;
      this.selectedRow = row;
    },
    //确认
    async handleConfirm(){
       DefaultGoodsClassify({goodsId:this.selectedRow.id,id:this.row.id}).then(response => {
            this.$message({
            message: "设置成功",
            type: "success",
            duration: 1000
          });
          this.$emit("handle-confirm");
      });

     
    }

  }
}
</script>
<style lang="scss">

.img-box {
  img {
    width: 50px;
    height: 50px;
    border: solid 1px #eee;
    cursor: pointer;
  }
}

.goods-container{
 height: calc(100vh - 510px);
  .el-table__body-wrapper{
    height: calc(100vh - 565px);
    overflow: auto;
  }
}
.goods-dialog{ 
  .el-dialog__body{
    height: 60vh!important;
    overflow: hidden;
  }
  .el-radio__label{
    display: none;
  }
}

</style>